Skip to main content

Vertical List Component

1. Introduction​

The Vertical List component is a layout element used to organize and display items in a vertical stack. It is highly customizable, allowing developers to control spacing, alignment, and wrapping behavior. This component is ideal for creating structured layouts, such as menus, lists, or grouped content, in a visually appealing and responsive manner.

Purpose and Use Cases​

  • Purpose: The Vertical List component is used to arrange items in a vertical order, providing a clean and organized layout.
  • Primary Use Cases:
    • Displaying lists of items, such as navigation menus or task lists.
    • Structuring grouped content in forms or dashboards.
    • Creating responsive layouts for mobile and desktop applications.

Benefits​

  • Flexibility: Offers extensive customization options for spacing, alignment, and wrapping.
  • Improved Readability: Ensures content is displayed in a clear and organized manner.
  • Responsive Design: Adapts seamlessly to different screen sizes and orientations.
  • User-Friendly: Enhances the user experience by providing a structured and visually appealing layout.

2. Properties​

The Vertical List component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

3. Style​

The Vertical List component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the dimensions of the vertical list.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the vertical list (default: 0).
  • Fixed Position: Locks the vertical list's position on the screen (default: OFF).
  • Hidden: Hides the vertical list from view (default: OFF).

Items​

  • Gaps:
    • Description: Space between the items in the vertical list.
    • Default: 10 pixels
  • Row Gap:
    • Description: Space between rows in the list.
    • Default: 0 pixels
  • Column Gap:
    • Description: Space between columns in the list.
    • Default: 0 pixels
  • Direction:
    • Description: Defines the flow of items in the list.
    • Options: Top to bottom (default), Bottom to top.
  • Wrap:
    • Description: Determines how items wrap within the list.
    • Options: No wrap, Wrap to multiple lines, Wrap reverse.
  • Horizontal Alignment:
    • Description: Aligns items horizontally within the list.
    • Options: Left, Center, Right.
  • Vertical Alignment:
    • Description: Aligns items vertically within the list.
    • Options: Top, Center, Bottom, Space between, Space around, Space evenly.

Overflow​

  • Reset: Resets overflow settings to default.
  • Options: Normal, On Hover, On Focus, When Active.
    • Overflow X: Controls horizontal overflow (visible, hidden, scroll, auto, initial, inherit).
    • Overflow Y: Controls vertical overflow (visible, hidden, scroll, auto, initial, inherit).

Border​

  • Reset: Resets border settings to default.
  • Options: Normal, On Hover.
    • Edges: Left, right, top, bottom, or all edges.
    • Type: None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit (default: none).
    • Color: Hexadecimal color code with a color picker.
    • Width: Border width in pixels.
    • Radius: Corner radius for rounded edges (default: none).

Padding​

  • Reset: Resets padding settings to default.
  • Options: Normal, On Hover.
    • Sides: Left, right, top, bottom, or all edges.
    • Size: Padding size in pixels.

Background​

  • Reset: Resets background settings to default.
  • Normal:
    • Background Color: Hexadecimal color code with a color picker (default: none).
    • Source: Media library or HTTP URL.
    • Attachment: Scroll, fixed, local, initial, inherit.
    • Position: X and Y positions in pixels (default: 0).
    • Repeat: Repeat, repeat-x, repeat-y, no-repeat, initial, inherit.
    • Size: Auto, length, cover, contain, initial, inherit.
    • Origin: Border-box, padding-box, content-box, initial, inherit.
  • On Hover:
    • Same properties as "Normal" but applied when the list is hovered.

Shadow​

  • Reset: Resets shadow settings to default.
  • Options: Normal, On Hover.
    • Color: Hexadecimal color code with a color picker (default: none).
    • Offset X: Horizontal spacing in pixels.
    • Offset Y: Vertical spacing in pixels.
    • Blur Radius: The amount of blur applied to the shadow.
    • Spread Radius: The size of the shadow spread.
    • Inset: Applies the shadow inside the element (default: OFF).

Cursor​

  • Reset: Resets cursor settings to default.
  • Options: Auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text, vertical-text, alias, copy, move, no-drop, not-allowed, grab, wait, all-scroll, col-resize, row-resize, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, ew-resize, ns-resize, neswe-resize, nesw-resize, zoom-in, zoom-out.

Font​

  • Reset: Resets font settings to default.
  • Options: Normal, On Hover, On Focus.
    • Font Size: Pixels (default: 14).
    • Letter Spacing: Number expressed in em, px, or rem units.
    • Word Spacing: Number expressed in em, px, or rem units.
    • Line Height: Number expressed in em, px, or rem units.
    • Weight: Thin, light, extra light, normal, medium, semi-bold, bold, extra bold, black (default: normal).
    • Color: Hexadecimal color code with a color picker (default: none).

4. Actions​

The Vertical List component supports the following action:

  • On Click: Triggers an event when an item in the list is clicked (default: none).

5. Best Practices for UI/UX​

When and Why to Use​

  • Use the Vertical List component to organize and display items in a structured vertical layout.
  • Ideal for creating menus, task lists, or grouped content.

Effective Scenarios​

  • Desktop: Use for navigation menus or grouped content in dashboards.
  • Tablet/Smartphone: Ensure the list is responsive and adapts to smaller screens.

Tips for Optimal Use​

  • Use consistent spacing and alignment to maintain a clean layout.
  • Ensure the list is styled to match the application's overall design.
  • Use wrapping options for long lists to improve readability.

6. Security Considerations​

Potential Risks​

  • External Resources: If the list's background or styling is loaded from external resources, ensure they are trustworthy.

Best Practices​

  • Use secure HTTPS connections for any external resources.
  • Test the list's responsiveness and behavior across different devices and screen sizes.